<template>
<div>
    <div class="showHot">
        <div><h2>热门演出</h2> <h3>  全部&gt;</h3></div>
        <div>
            <ul>
                <li v-for="item in hotsShowList">
                
                    <div><img :src="item.pic" alt=""></div>
                    <p>{{item.show_name}}</p>
                </li>
            </ul>
        </div>
        

    </div>
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data () {
        return {
        }
    },
    computed:{
        ...mapState('main',['hotsShowList'])
    },
    mounted () {
    }
}
</script>

<style lang='scss' scoped>
            
.showHot{
        padding: .3rem;
        div:nth-of-type(1){
            display: flex;
            justify-content: space-between;
         }
    div:nth-of-type(2){
        // display: flex;
        overflow: hidden;
        width: 100%;
        margin-top: .2rem;
        ul{
            display: flex;
            overflow-x: auto;
            // overflow: hidden;
            li{
                font-size: .26rem;
                color: #666;
                flex-shrink: 0;
                // float: left;
                margin-right: .08rem;
                height: 2.7rem;
                width: 1.6rem;
                p{
                   height: .7rem !important;
                //    background: red;
                   overflow: hidden;

                   display: -webkit-box;
                }
               
                div{
                    width: 1.6rem;
                    height:2rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
   
}
</style>
